<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background: #fcc;
        }
        
        .k {
            width: 550px;
            height: 400px;
            background: #fff;
            border-radius: 20px;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
            padding: 20px;
        }
        
        h1 {
            margin-bottom: 30px;
        }
        
        input {
            width: 290px;
            height: 20px;
            border-radius: 10px;
            margin: 10px 0;
            outline: none;
            font-size: 20px;
            padding: 5px;
            border: 1px solid black;
        }
        
        span {
            font-size: 20px;
        }
        
        .denglu,
        .zhuce {
            width: 70px;
            height: 30px;
            line-height: 30px;
            padding: 0;
            border: none;
            border-radius: 2px;
            margin: 30px;
        }
        
        .denglu {
            background: #96CDCD;
        }
        
        .zhuce {
            background: #FFC125;
        }
        
        .denglu:active,
        .zhuce:active {
            opacity: 0.8;
        }
        
        .tishi {
            background: rgba(0, 0, 0, 0.5);
            height: 50px;
            width: 250px;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            position: fixed;
            left: 0;
            right: 0;
            top: 30px;
            margin: auto;
            display: none;
        }
    </style>
</head>

<body>
    <div class="k">
        <h1>注册</h1>
        <span>用&nbsp;&nbsp;户&nbsp;&nbsp;名：</span>
        <input type="text" class="nicheng" placeholder="用户名"><br>
        <span>注册账户：</span>
        <input type="text" class="zhanghu" placeholder="账号5位至16位"><br>
        <span>注册密码：</span>
        <input type="password" class="mima" placeholder="密码至少包含数字和字母"><br>
        <input type="button" value="确定" class="denglu">
        <input type="button" value="取消" class="zhuce">
    </div>
    <div class="tishi">请输入正确的账号和密码</div>
</body>
<script src="jquery.min.js"></script>
<script src="citys.js"></script>
<script>
    $(".zhuce").click(function() {
        window.location.href = url
    })
    $(".denglu").click(function() {
        var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
        var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
        console.log(reg.test($(".mima").val()))
        if (uPattern.test($(".zhanghu").val()) && reg.test($(".mima").val())) {
            $.ajax({
                url: `${url}/zhuce`,
                data: {
                    zhang: $(".zhanghu").val(),
                    mima: $(".mima").val(),
                    name: $(".nicheng").val(),
                },
                success(data) {
                    if (data === "成功") {
                        $(".tishi").html("注册成功").fadeIn().fadeOut(() => {
                            window.location.href = url
                        })

                    } else {
                        $(".tishi").html(data).fadeIn().fadeOut()
                    }
                }
            })
        } else(
            $(".tishi").html("请输入正确的账号和密码").fadeIn().fadeOut(2000)
        )

    })
</script>

</html>